<template>
	<view class="mainpadding" style="padding-bottom: 0;">
		<view class="" style="padding-bottom: 150rpx;">
			<view class="mainpadding ffffff radius flexbetween" @click="qyshow=true">
				<view class="main_size bold hei_text">區域</view>
				<view class="flexleft">
					<input class="main_size bold hei_text textright" disabled="" type="text" placeholder="請選擇區域"
						v-model="lc">
					<u-icon name="arrow-right" color="#333" size="14"></u-icon>
				</view>
			</view>
			<view class="flexbetween mainpadding_top ffffff radius">
				<view class="main_size bold hei_text">單位</view>
				<input class="main_size bold hei_text textright" type="text" placeholder="請輸入" v-model="unit">
			</view>
			<view class="mainpadding_top ffffff radius">
				<view class="flexleft ">
					<view class="" style="flex: 4;">
						<view class="main_size bold hei_text">生成數量</view>
					</view>
					<view class="flexcenter" style="flex: 3;">
						<view class="main_size bold hei_text">人數</view>
					</view>
					<view class="flexcenter" style="flex: 3;">
						<view class="main_size bold hei_text">號碼</view>
					</view>
				</view>
				<view class="flexleft margin_top" v-for="(item,index) in dataList" :key="index">
					<view class="" style="flex: 4;"></view>
					<view class="flexcenter" style="flex: 3;">
						<view class="radius flexleft margin_right2"
							style=";border: 1rpx solid #ffa126;padding: 8rpx 10rpx;box-sizing: border-box;">
							<input class="main_size bold huang_text textcenter" type="number" placeholder="" v-model="item.count">
						</view>
					</view>
					<view class="flexcenter" style="flex: 3;">
						<view class="radius flexleft"
							style="border: 1rpx solid #ffa126;padding: 8rpx 10rpx;box-sizing: border-box;">
							<input class="main_size bold huang_text textcenter" type="number" placeholder="" v-model="item.num">
						</view>
					</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="xiaohui">注:人數為使用人數,號碼+單位為使用名稱</view>
					<view class="addimg" @click="addFn"></view>
				</view>
			</view>
		</view>
		
		<view class="posibottom mainpadding" style="padding-bottom: 0;">
			<view class="submitbtn" @click="submit()">生成</view>
		</view>
		<u-modal :show="qyshow" showCancelButton confirmText="確認" cancelText="取消" confirmColor="#f5a623" title="選擇區域名稱"
			@cancel="qyshow=false" @confirm="qyconfirm">
			<view class="slot-content">
				<view class="mainpadding">
					<picker-view indicator-style="height: 50px;" :value="currentvalue" @change="bindChange"
						class="picker-view">
						<picker-view-column>
							<view class="item" v-for="(item,index) in qylist" :key="index">{{item.name}}</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
import HttpRequest from 'uview-ui/libs/luch-request'

	export default {
		data() {
			return {
				lc: "",
				lc_id: "",
				unit:"",
				qylist: [],
				qyshow: false,
				dataList:[{
					num:"",
					count:""
				}],
				issubmit:false,
				currentvalue:[0]
				
			}
		},
		onLoad() {
			this.getqyList()
		},
		methods: {
			addFn(){
				this.dataList.push({
					num:"",
					count:""
				})
			},
			submit(){
				if(this.lc_id==""){
					this.http.toast("請選擇區域")
					return false
				}
				if(this.unit==""){
					this.http.toast("請輸入單位")
					return false
				}
				let data = []
				for(let i=0;i<this.dataList.length;i++){
					let item = this.dataList[i]
					if((item.num!="" && item.count=="") || (item.num=="" && item.count!="")){
						this.http.toast("請將生成信息填寫完整后提交")
						return false
					}
					if(item.num!='' && item.count!=""){
						data.push(item)
					}
				}
				if(!data.length){
					this.http.toast("請至少填寫一個生成信息提交")
					return false
				}
				if(this.hasDuplicateCounts(data)){
					this.http.toast("號碼不能一樣")
					return false
				}
				if(this.issubmit) return
				this.issubmit = true
				uni.showLoading({
					mask:true,
					title:"請稍後"
				})
				this.http.request("/api/shop/addAllShoptable", 'POST', {
					shop_id: uni.getStorageSync("shop_id"),
					lc_id:this.lc_id,
					unit:this.unit,
					tabledata:data
				}).then(res => {
					uni.hideLoading()
					this.http.toast(res.msg)
					if(res.code==1){
						setTimeout(()=>{
							uni.navigateBack(1)
						},500)
					}else{
						this.issubmit = false
					}
					
				})
			},
			hasDuplicateCounts(arr) {
			  const countValues = arr.map(item => item.num);
			  return new Set(countValues).size !== countValues.length;
			},
			bindChange(e) {
				let val = e.detail.value
				this.currentvalue = e.detail.value
			},
			qyconfirm() {
				let val = this.currentvalue
				this.lc = this.qylist[val[0]].name
				this.lc_id = this.qylist[val[0]].id
				this.qyshow = false
			},
			getqyList() {
				this.http.request("/api/shop/shopAreaIndex", 'GET', {
					shop_id: uni.getStorageSync("shop_id")
				}).then(res => {
					this.qylist = res.data
				})
			},
		}
	}
</script>

<style>

</style>